<script setup lang="tsx">
import { statusOptions } from '@/pages/serve/project/constants'
import { ref, watch } from 'vue'
import { MessagePlugin } from 'tdesign-vue-next'
//1.searchFrom组件对外的props
const props = defineProps({
  searchFormDataProp: {
    type: Object,
    default: () => {
      return {
        name: '',
        status: undefined
      }
    },
    required: true
  }
})
//2.SearchForm组件对外的event
const emits = defineEmits(['onSearchFormSubmitEmit'])
// 重置按钮
const onSearchFormReset = () => {
  MessagePlugin.success('重置成功')
}
const onSearchFormSubmitEmit = () => {
  console.log(searchFormData.value)

  emits('onSearchFormSubmitEmit', searchFormData.value)
  //3.重置表单数据
  projectSearchForm.value.reset()
}

//3.SearchFrom组件对外的内部属性
const projectSearchForm = ref(null)

const searchFormData = ref({
  name: '',
  status: undefined
})

//通过watch监听props属性
watch(
  () => props.searchFormDataProp,
  (newValue) => {
    searchFormData.value = newValue.value
  }
)
//4.SearchFrom组件对外的内部事件
</script>

<template>
  <!--第一行  -->
  <t-form
    ref="projectSearchForm"
    :data="searchFormData"
    layout="inline"
    labelAlign="right"
    lebWidth="100"
    colon
    @reset="onSearchFormReset"
    @submit="onSearchFormSubmitEmit"
  >
    <!-- 护理项目名称的搜索框 -->
    <t-form-item label="护理项目名称" name="name">
      <t-input
        v-model="searchFormData.name"
        placeholder="请输入"
        clearable
      ></t-input>
    </t-form-item>
    <!-- 状态的下拉框 -->
    <t-form-item label="状态" name="status">
      <t-select
        v-model="searchFormData.status"
        class="demo-select-base"
        placeholder="请选择"
        clearable
        filterable
      >
        <t-option
          v-for="(item, index) in statusOptions"
          :key="index"
          :value="item.value"
          :label="item.label"
        >
          {{ item.label }}
        </t-option>
      </t-select>
    </t-form-item>
    <!-- 按钮：重置和搜索 -->
    <t-form-item>
      <t-space size="small">
        <t-button theme="default" variant="base" type="reset">重置</t-button>
        <t-button theme="primary" type="submit">搜索</t-button>
      </t-space>
    </t-form-item>
  </t-form>
</template>

<style scoped>
</style>
